<template>
	<view>
		<view style="width: 100%;text-align: center; padding-top: 50px; font-size: 40px;">
			矿且还有你
		</view>
		
		<view class="adddiv">
		    <input v-model="name" class="uni-input addinput" type="text" placeholder="请输入用户名" />
		</view>
		
		<view class="adddiv2">
			<input v-model="password" class="uni-input addinput" password type="text" placeholder="请输入密码" />
		</view>
		
		<view class="adddiv2">
			<input v-model="secondPassword" class="uni-input addinput" password type="text" placeholder="请再次输入密码" />
		</view>
		
		<view class="adddiv2">
			<input v-model="telephone" class="uni-input addinput" type="number" placeholder="手机号码" />
			<button class="addsend" :disabled="isDisabled" @click="sendmsg">{{buttonName}}</button>
		</view>
		
		<view class="adddiv2">
			<input v-model="verification" class="uni-input addinput" type="number" placeholder="请输入验证码" />
		</view>
		
		<view class="adddiv3">
		    <button plain="true" class="addbtn" type="primary" :disabled="log" @click="zhuce">注册</button>
		</view>
		<view style="height: 60px;text-align: center;margin-top:20px;">
			<view style="line-height: 1.8;">
				CDIO-1组&copy;版权所有
			</view>
			<view style="line-height: 1.8;">
				<a style="text-decoration: none;color: #000000;" href="http://www.miit.gov.cn/">备案号:苏ICP备19058910号</a>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				password: '',
				secondPassword: '',
				telephone: '',
				isDisabled: false,
				time: 60,
				buttonName: "获取验证",
				verification:"",
				JSESSIONID:""
			}
		},
		methods: {
			getCookies() {
			  if (document.cookie.length > 0) {
			    var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
			    for (var i = 0; i < arr.length; i++) {
			      var arr2 = arr[i].split("="); //再次切割
			      //判断查找相对应的值
			      if (arr2[0] == "JSESSIONID") {
			        this.JSESSIONID = arr2[1]; //保存到保存数据的地方
			      }
			    }
			  }
			},
			istrue(num) {
				let Num = String(num)
				if(Num === this.JSESSIONID) {
					return true
				}else{
					return false
				}
			},
			zhuce() {
				if(this.ispasswordsame) {
					let that = this
					uni.request({
					    url: 'http://101.37.15.60:8080/api/v1/sign',
						method: 'POST',
					    data: {
					        id: '',
							name: that.name,
							nickname: '',
							password: that.password,
							telephone: that.telephone,
					    },
					    success: (res) => {
					        if(res.data.message == 'SUCCESS') {
								let userid = res.data.data.id
								let telephone1 = String(that.telephone)
								let otpCode = that.verification
								that.getCookies()
								uni.request({
								    url: 'http://101.37.15.60:8080/api/v1/users/bangding', 
									method: 'PUT',
									data:{
										id: userid,
										status: that.istrue(otpCode),
										telephone: telephone1
									},
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									withCredentials: true,
								    success: (res) => {
										if(res.data.message == 'SUCCESS') {
											uni.showToast({
											    title: '欢迎加入我们！',
											    duration: 1500
											});
											setTimeout(function(){ that.toindex() }, 500);
										}else {
											uni.showToast({
												icon: 'none',
											    title: '验证码错误，请重试。',
											    duration: 1500
											});
										}
								    }
								});
							}else {
								that.tixing(res.data.message,'none')
							}
					    }
					});
				}else{
					this.tixing('请确保密码相同。','none')
				}
			},
			toindex() {
				this.$router.push('../login')
			},
			sendmsg() {
				let me = this;
				var myreg =/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(myreg.test(me.telephone)) {
					uni.request({
					    url: 'http://101.37.15.60:8080/api/v1/users/getotp',
						method:'POST',
						header:{
							'Content-Type': 'application/x-www-form-urlencoded'
						},
					    data: {
							telephone: me.telephone
					    },
					    success: (res) => {
					        if(res.data.message == 'SUCCESS') {
								me.JSESSIONID = res.data.data
								me.tixing('发送成功')
								me.isDisabled = true;
								let interval = window.setInterval(function() {
								    me.buttonName =  me.time + "秒";
								    --me.time;
								    if (me.time < 0) {
								        me.buttonName = "重新发送";
								        me.time = 60;
								        me.isDisabled = false;
								        window.clearInterval(interval);
								    }
								}, 1000);
							}else {
								me.tixing('发送失败，请重试。','none')
							}
					    }
					});
				}else {
					this.tixing('手机号码不合法，请重试。','none')
				}
			},
			tixing(msg,icon) {
				uni.showToast({
					icon: icon,
				    title: msg,
				    duration: 1500
				});
			}
		},
		computed: {
			log() {
				if(!this.name || !this.password || !this.secondPassword || !this.telephone || !this.verification) {
					return true
				}else {
					return false
				}
			},
			ispasswordsame() {
				if(this.password === this.secondPassword) {
					return true
				}else if(this.password != this.secondPassword) {
					return false
				}else if(this.password == "" || this.secondPassword == "") {
					return false
				}
			}
		}
	}
</script>

<style scoped>
	.addinput {
		width: 200px;
		height: 40px;
		border-radius: 15px;
		box-shadow: 1px 2px 2px #606266;
	}
	.adddiv {
		display: flex;
		justify-content: center;
		padding: 0 80px 0 80px;
		width: 100%;
		height: 75px;
		margin-top: 50px;
	}
	.adddiv2 {
		display: flex;
		justify-content: center;
		padding: 0 80px 0 80px;
		width: 100%;
		height: 75px;
	}
	.adddiv3 {
		display: flex;
		justify-content: center;
		padding: 0 80px 0 80px;
		width: 100%;
	}
	.addbtn {
		width: 200px;
		border-radius: 20px;
		background-color: #409EFF;
	}
	.adddiv4 {
		display: flex;
		justify-content: center;
	}
	.adddiv5 {
		display: flex;
		justify-content: center;
		padding-top: 25px;
	}
	.addtext {
		width: 100px;
		text-align: center;
	}
	.addsend {
		position: absolute;
		width: 95px;
		height: 40px;
		right: 80px;
		background-color: #FFFFFF;
		border-radius: 15px;
		text-align: center;
		vertical-align: middle;
		font-size: 16px;
	}
</style>
